<!--
 * @Author: 2112778581 2112778581@qq.com
 * @Date: 2024-01-30 16:47:52
 * @LastEditors: 2112778581 2112778581@qq.com
 * @LastEditTime: 2024-02-20 18:08:55
 * @FilePath: \my-sjksh\three\01-三角形 copy.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 2112778581 2112778581@qq.com
 * @Date: 2024-01-17 15:17:08
 * @LastEditors: 2112778581 2112778581@qq.com
 * @LastEditTime: 2024-01-17 15:17:16
 * @FilePath: \my-sjksh\three\01-三角形.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js Triangle</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script type="module">
      import * as THREE from "https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js";

      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      var geometry = new THREE.BoxGeometry(1, 1, 1);

      var uniforms = {
        time: { value: 0.0 },
      };

      var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: `
        varying vec3 vPos;
        void main() {
            vPos = position;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }
    `,
        fragmentShader: `
        uniform float time;
        varying vec3 vPos;
        void main() {
            float line = step(0.1, mod(vPos.y + time, 1.0));
            gl_FragColor = mix(vec4(0.0, 0.0, 1.0, 1.0), vec4(1.0, 0.0, 0.0, 1.0), line);
        }
    `,
      });

      var cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 5;
      cube.rotateX(Math.PI/ 6)
      var clock = new THREE.Clock();

      var animate = function () {
        requestAnimationFrame(animate);

        uniforms.time.value = clock.getElapsedTime();

        renderer.render(scene, camera);
      };

      animate();
    </script>
  </body>
</html>
